<div class="container-fluid mt-4">
    <!-- 头部标题 -->
    <div class="card mb-2">
        <!--Card content-->
        <div class="card-body">
            <h6 class="mb-2 mb-sm-0 pt-1" style="text-align: center;">权限管理</h6>
        </div>
    </div>
    <!-- 头部标题-end -->
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-header" style="text-align: center;">
                    权限维护
                </div>
                <div class="card-body content-sc">
                    <button type="button" class="mb-2 btn btn-success btn-sm float-right" data-toggle="modal"
                        data-target="#addRole">添加新权限</button>
                    <table class="table table-striped table-bordered table-align">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">编号</th>
                                <th scope="col">权限名称</th>
                                <th scope="col">权限路径</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>1</th>
                                <td>视频统计</td>
                                <td>statisticsPage.html</td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                        data-target="#settingRole">更新</button>
                                </td>
                            </tr>
                            <tr>
                                <th>2</th>
                                <td>权限管理</td>
                                <td>rolePage.html</td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                        data-target="#settingRole">更新</button>
                                </td>
                            </tr>
                            <tr>
                                <th>3</th>
                                <td>课程管理</td>
                                <td>coursePage.html</td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                        data-target="#settingRole">更新</button>
                                </td>
                            </tr>
                            <tr>
                                <th>4</th>
                                <td>老师管理</td>
                                <td>teacherPage.html</td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                        data-target="#settingRole">更新</button>
                                </td>
                            </tr>
                            <tr>
                                <th>5</th>
                                <td>视频管理</td>
                                <td>vedioPage.html</td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                        data-target="#settingRole">更新</button>
                                </td>
                            </tr>
                            <tr>
                                <th>6</th>
                                <td>我的视频</td>
                                <td>myVedioPage.html</td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                        data-target="#settingRole">更新</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-header" style="text-align: center;">
                    角色维护
                </div>
                <div class="card-body content-sc">
                    <button type="button" class="mb-2 btn btn-success btn-sm float-right" data-toggle="modal"
                        data-target="#addPart">添加新角色</button>
                    <table class="table table-striped table-bordered table-align">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">编号</th>
                                <th scope="col">角色名</th>
                                <th scope="col">权限</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody id="roleTable" >
                            <tr>
                                <th>1</th>
                                <td>超级管理员</td>
                                <td>
                                    <ul class="list-unstyled mb-0">
                                        <li>视频统计</li>
                                        <li>权限管理</li>
                                        <li>课程管理</li>
                                        <li>老师管理</li>
                                        <li>视频管理</li>
                                    </ul>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                        data-target="#settingPart">更新</button>
                                </td>
                            </tr>
                            <tr>
                                <th>2</th>
                                <td>普通管理员</td>
                                <td>
                                    <ul class="list-unstyled mb-0">
                                        <li>视频统计</li>
                                        <li>课程管理</li>
                                        <li>老师管理</li>
                                        <li>视频管理</li>
                                        <li>我的视频</li>
                                    </ul>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                        data-target="#settingPart">更新</button>
                                </td>
                            </tr>
                            <tr>
                                <th>3</th>
                                <td>老师</td>
                                <td>
                                    <ul class="list-unstyled mb-0">
                                        <li>视频统计</li>
                                        <li>我的视频</li>
                                    </ul>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                        data-target="#settingPart">更新</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <script id="roleTemp" type="text/html" >
                        {{each roles r}}
                        <tr>
                            <th>{{r.id}}</th>
                            <td>{{r.rname}}</td>
                            <td>
                                <ul class="list-unstyled mb-0">
                                    {{each r.powers pname}}
                                    <li>{{pname}}</li>
                                    {{/each}}
                                </ul>
                            </td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm" onclick="findRoleById({{r.id}})">更新</button>
                            </td>
                        </tr>
                        {{/each}}
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 权限添加/修改 -->
<div class="modal fade" id="addRole" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">权限添加</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="rolename">权限名称</label>
                        <input type="text" class="form-control" id="rolename">
                    </div>
                    <div class="form-group">
                        <label for="rolefile">权限页面</label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="rolefile">
                            <label class="custom-file-label" for="rolefile">选择页面文件</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="doPowerAdd()" >添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 权限添加/修改-结束 -->
<!-- 权限添加/修改 -->
<div class="modal fade" id="settingRole" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">权限修改</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="roleid1">权限编号</label>
                        <input type="text" class="form-control" value="1" id="roleid1" readonly>
                    </div>
                    <div class="form-group">
                        <label for="rolename1">权限名称</label>
                        <input type="text" class="form-control" value="视频统计" id="rolename1">
                    </div>
                    <div class="form-group">
                        <label for="rolefile1">权限页面</label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="rolefile1">
                            <label class="custom-file-label" for="rolefile1">选择页面文件</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">更新</button>
            </div>
        </div>
    </div>
</div>
<!-- 权限添加/修改-结束 -->
<!-- 角色添加 -->
<div class="modal fade" id="addPart" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">角色添加</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="partname">角色名称</label>
                        <input type="text" class="form-control" id="partname">
                    </div>
                    <div class="form-group mb-0">
                        <label for="partrole">角色权限</label>
                    </div>
                    <div class="row" style="text-align: center;">
                        <div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" value="" id="rolea">
                            <label class="form-check-label" for="rolea">视频统计</label>
                        </div>
                        <div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" value="" id="roleb">
                            <label class="form-check-label" for="roleb">权限管理</label>
                        </div>
                        <div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" value="" id="rolec">
                            <label class="form-check-label" for="rolec">课程管理</label>
                        </div>
                        <div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" value="" id="roled">
                            <label class="form-check-label" for="roled">老师管理</label>
                        </div>
                        <div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" value="" id="rolee">
                            <label class="form-check-label" for="rolee">视频管理</label>
                        </div>
                        <div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" value="" id="roled">
                            <label class="form-check-label" for="roled">我的视频</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 角色/修改-结束 -->
<!-- 角色修改 -->
<div class="modal fade" id="settingPart" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">角色修改</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="partid2">角色编号</label>
                        <input type="text" class="form-control" id="partid2" value="1" readonly>
                    </div>
                    <div class="form-group">
                        <label for="partname2">角色名称</label>
                        <input type="text" class="form-control" id="partname2">
                    </div>
                    <div class="form-group mb-0">
                        <label for="partrole">角色权限</label>
                    </div>
                    <div id="modifyPowerCheckBox" class="row" style="text-align: center;">

                        <div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" value="" checked id="rolea" checked>
                            <label class="form-check-label" for="rolea">视频统计</label>
                        </div>
                        <div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" value="" checked id="roleb">
                            <label class="form-check-label" for="roleb">权限管理</label>
                        </div>
                        <div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" value="" checked id="rolec">
                            <label class="form-check-label" for="rolec">课程管理</label>
                        </div>
                        <div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" value="" id="roled">
                            <label class="form-check-label" for="roled">老师管理</label>
                        </div>
                        <div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" value="" id="rolee">
                            <label class="form-check-label" for="rolee">视频管理</label>
                        </div>
                        <div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" value="" id="roled">
                            <label class="form-check-label" for="roled">我的视频</label>
                        </div>

                    </div>
                    <script id="modifyPowerCheckBoxTemp" type="text/html">
                        {{each data p}}
                        <div class="form-check col-sm-4">
                            <input class="form-check-input" type="checkbox" value="{{p.powerId}}" >
                            <label class="form-check-label" for="roled">{{p.powerName}}</label>
                        </div>
                        {{/each}}
                    </script>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">更新</button>
            </div>
        </div>
    </div>
</div>
<!-- 角色修改-结束 -->
<script>
    function doPowerAdd(){
        $("#addRole").modal("hide");// 隐藏模态框
        // $("#addRole").modal("show");// 显示模态框
    }

    function loadRoleData() {
        $.ajax({
            url: 'http://192.168.19.113/videoCourse_stu/server/selectAdministrator.php',
            dataType: 'json',
            type: 'get',
            success: function(result){
                console.log('loadRoleData:', result);
                let arr = [];
                result.data[0].forEach(ele => {
                    let last = arr[arr.length-1];
                    if(last && last.id == ele.id){
                        last.powers.push(ele.pname);
                    } else {
                        let role = {id: ele.id, rname: ele.rname, powers: [ele.pname]};
                        arr.push(role);
                    }
                });
                console.log('role: ', arr);
                let html = template("roleTemp", {roles: arr});
                $("#roleTable").html(html);
            }
        });
    }
    loadRoleData();

    function loadRolePowerCheckBox() {
        $.ajax({
            url: 'http://localhost/videoCourse_stu/server/selectPower.php',
            dataType: 'json',
            success: function(result){
                console.log('loadRolePowerCheckBox:', result);
                let html = template("modifyPowerCheckBoxTemp", result);
                $("#modifyPowerCheckBox").html(html);
            }
        });
    }
    loadRolePowerCheckBox();

    function findRoleById(id) {
        $.ajax({
            url: 'http://localhost/videoCourse_stu/server/selectRoleById.php',
            dataType: 'json',
            data: {roleId: id},
            type: 'post',
            success: function(result){
                console.log('findRoleById:', result);
                let role = result.data;
                // console.log('role:', role);
                $("#partid2").val(role.roleId);
                $("#partname2").val(role.roleName);

                console.log('powers:', role.powers);

                // 去除浏览器缓存影响
                $("#modifyPowerCheckBox :checkbox").prop('checked', false);
                // 设置该角色对应权限的选中效果
                role.powers.forEach(p => {
                    $("#modifyPowerCheckBox input[value="+ p.powerId +"]").prop('checked', true);
                });

                $("#settingPart").modal("show");
            }
        });
    }
</script>